<template>
  <!-- 无缝滚动效果 -->
  <div class="marquee-wrap">
    <div class="marquee-list" :class="{'animate-up': animateUp}">
      <div v-for="(item, index) in scrollList" :key="index">
		  <view class="flex align-center">
			<image class="marqueeAvatar" :src="item.avatar"></image>
		  	<text class="font-size-16">儿童{{item.name}}申请了帮扶</text>
		  </view>
	  </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "marquee-up",
  props: {
  	scrollList: {
  		type: Array,
  		default: []
  	},
  },
  data() {
    return {
      animateUp: false,
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 2000);
  },
  methods: {
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.scrollList.push(this.scrollList[0])
        this.scrollList.shift()
        this.animateUp = false
      }, 500)
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }

};
</script>
<style scoped>
.marquee-wrap  {
  position: fixed;
  top: 40rpx;
  left: 40rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  color: #fff;
  overflow: hidden;
  padding: 8rpx 20rpx;
  height: 32px;
  line-height: 32px;
}
.marquee-wrap .marquee-list li {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  list-style: none;
  color: #fff;
  font-weight: 400;
}
.marquee-wrap .animate-up {
	transition: all 0.5s ease-in-out;
	transform: translateY(-32px);
}
.marqueeAvatar{
	width: 30rpx;
	height: 30rpx;
	border-radius: 15rpx;
}
</style>
